<template>
<div >
<div class="text-start p-2 display-1"> <h5 class="w-50">定时任务列表
  <button type="button" class="btn btn-primary" @click="showAdd">
    添加任务
  </button>
</h5>
</div>
 <table class="table">
    <thead>
      <tr class="table-success">
        <th>ID</th>
        <th>任务名称</th>
        <th>分组</th>
         <th>触发器名称</th>
         <th>corn表达式</th>
         <th>状态</th>
         <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(task,index) in taskList" :class="index%2==0?'table-primary':'table-info'">
        <td>{{task.id}}</td>
        <td>{{task.name}}</td>
        <td>{{task.group}}</td>
        <td>{{task.trigger}}</td>
        <td>{{task.cron}}</td>
        <td>{{getTaskStateName(task.state)}}</td>
         <td>
           <button v-if="task.state==2||task.state==4||task.state==5" type="button" class="btn btn-info  btn-sm" @click="optById('restart',task.id)">重启</button>
           <button v-if="task.state==1" type="button" class="btn btn-warning  btn-sm" @click="optById('pause',task.id)">暂停</button>
           <button type="button" class="btn btn-primary  btn-sm" @click="optById('trigger',task.id)">执行</button>
           <button type="button" class="btn btn-success  btn-sm" @click="showLog(task.id)">日志</button>
           <button type="button" class="btn btn-primary  btn-sm" @click="showEdit(task)">编辑</button>
           <button type="button" class="btn btn-danger  btn-sm" @click="optById('del',task.id)">删除</button>
         </td>
      </tr>
    </tbody>
  </table>
  <Add ref="addTask" @renderTaskList="renderTaskList">添加任务</Add>
  <Edit ref="editTask" @renderTaskList="renderTaskList"></Edit>
  <ShowLog ref="logInfo"></ShowLog>
</div>
</template>
<script>
import Add from '@/components/views/Add.vue'
import Edit from '@/components/views/Edit.vue'
import ShowLog from '@/components/views/Log.vue'
export default{
  name:"List",
  components:{
    Add,
    Edit,
    ShowLog
  },
  data(){
    return {
      taskList:null
    };
  },
  methods:{
    getTaskStateName: function (state) {
      //NONE, NORMAL, PAUSED, COMPLETE, ERROR, BLOCKED
      switch (state){
        case 1:
          return "正常"
        case 2:
          return "暂停"
        case 3:
          return "完成"
        case 4:
          return "错误"
        case 5:
          return "阻塞"
        default :
          return ""
      }
    },
    renderTaskList(){
      fetch("/quartz/findAll").then(res=>res.json()).then(data=>{
        this.taskList=data
      })
    },
    showAdd(){
      this.$refs.addTask.showDialog()
    },
    showEdit(task){
      this.$refs.editTask.showDialog(task)
    },
    showLog(id){
      this.$refs.logInfo.showDialog(id)
    },
    optById:function (type,id) {
      var optUrl=""
      var optName=""
      switch (type) {
        case 'del':
          optUrl='removeTask'
          optName='删除'
          break
        case 'pause':
          optUrl='pauseTask'
          optName='暂停'
          break
        case 'restart':
          optUrl='restartTask'
          optName='重启'
          break
        case 'trigger':
          optUrl='triggerTask'
          optName='立即执行'
          break
        default:
          return;

      }
      if(!window.confirm("你确定要"+optName+"该条任务吗")){
        return
      }
      let that=this
      fetch("/quartz/"+optUrl+"?id="+id).then(res=>res.json()).then(data=>{
        that.renderTaskList()
        alert(optName+"任务成功!")
      })
    }
  },
  mounted () {
    //渲染列表
    this.renderTaskList();
    }
};
</script>
